<template>
  <div>
      <div class="head">
          <h4>{{wode}}</h4>
          <img :src="img1" >
          <router-link to="/banben" ><img :src="img2" ></router-link>
      </div>
      <router-link to="/xq"> 
      <div class="tou">
          <img :src="img3" >
          <h4>{{a1}}</br><p>{{a2}}</p></h4>
          <h5>{{a3}}</h5>
          <div style="clear:both"></div>
      </div>
      </router-link>
      <div class="na">
        <ul>
            <li  v-for="todo in todos">{{todo.text}}</br><p>{{todo.t}}</p></li>
        </ul>
      </div>
      <div class="tu">
          <img :src="img4" alt="">
      </div>
      <div class="tu1">
        <ul>
          <router-link to="/shouhuo" ><li v-for="tod in todo"><img :src="tod.img"><p>{{tod.text}} </p></li></router-link>
        </ul>
      </div>
      <div class="tu1">
        <ul>
          <router-link to="/lianmingka" ><li v-for="to in tod"><img :src="to.img"><p>{{to.text}} <span>{{to.a}}</span> </p></li></router-link>
        </ul>
      </div>
      <div class="tu1">
        <ul>
          <li v-for="t in to"><img :src="t.img"><p>{{t.text}} </p></li>
        </ul>
      </div>




  </div>
</template>
<script>
import img1 from '../img/a3.png'
import img2 from '../img/a4.png'
import img3 from '../img/a5.png'
import img4 from '../img/a6.png'
import img5 from '../img/a7.png'
import img6 from '../img/a8.png'
import img7 from '../img/a9.png'
import img8 from '../img/a10.png'
import img9 from '../img/a11.png'
import img10 from '../img/a12.png'
import img11 from '../img/a13.png'
import img12 from '../img/a14.png'




export default {
    data () {
        return {
            wode:'我的',
            img1:require('../img/8.png'),
            img2:require('../img/7.png'),
            img3:require('../img/a1.png'),
            img4:require('../img/a2.png'),


            a1:'1*****c',
            a2:'186****5327',
            a3:'>',
            todos: [
                { text: '0.00元',t:'钱包' },
                { text: '1个',t:'红包' },
                { text: '0个',t:'金币' }
            ],
            todo: [
                { text: '收货地址',img:img1 },
                { text: '我的收藏',img:img2 },
               
            ],
            tod: [
                { text: '饿了么联名卡',img:img3,a:'免费领百元红包' },
                { text: '推荐有奖',img:img4,a:'5元现金拿不停' },
                { text: '金币商城',img:img5,a:'0元好物在这里' },
                { text: '城市代理申请',img:img6,a:'最高6个月免抽佣' },
                { text: '我要借款',img:img7,a:'低门槛急速放款' },
                { text: '玩游戏领红包',img:img8,a:'大额红包任性领' },
                { text: '免费流量',img:img9,a:'每月最高500M' },
                { text: '饿公益',img:img10,a:'点餐也能做公益' },
            ],
            to: [
                { text: '我的客服',img:img11 },
                { text: '欢迎评分',img:img12 },
            ],


        }
    }
}
</script>
<style>
.head{
    height: 60px;
    background: #0090ff;
    font-size: 20px;
    color:#fff;
}
.head h4{
    float:left;
    padding-left: 7%;
    line-height: 60px;
}
.head img{
    float:right;
    padding-right: 5%;
    padding-top: 3%;
}
.tou{
    height:20%;
    background: #0090ff ;
}
.tou img{
    float:left;
    width:20%;
    height:20%;
    padding:10% 2% 10% 10%;
}
.tou h4{
    float:left;
    color:#fff;
    font-size: 20px;
    padding-top:15%;
}
.tou h4 p{
    padding-top: 5%;
    font-size: 14px;
}
.tou h5{
    float:right;
    font-size: 26px;
    padding-right: 5%;
    padding-top:20%;
    color:#fff;
}
.na{
    height:15%;
}
.na ul{
    display: flex;
}
.na ul li{
    flex: 1;
    font-size: 20px;
    padding-top: 5% ;
    padding-bottom: 5% ;
    color:aqua;
    border-right: 1px solid#ccc;
    border-bottom: 1px solid#ccc;
}
.na ul li p{
    color:#000;
    font-size: 16px;
    padding-top:5%;
}
.tu{
    border-bottom: 15px solid#f5f5f5;
     border-top: 15px solid#f5f5f5;
}
.tu img{
    width:100%;
}
.tu1 {
    border-bottom: 15px solid#f5f5f5;
}
.tu1 li{
  position: relative;
}
.tu1 li img{
  float:left;
  width:5%;
  height: 5%;
  padding:3%;
}
.tu1 li p {
  float:left;
  padding:4%;
  
 
}
.tu1 li p span{
  position: absolute;
  right:5%;
  top:35%;
  font-size: 12px;
  color:#ccc;
}


.tu1 li{
  border-bottom: 1px solid#f5f5f5;
  overflow: hidden;
  font-size: 14px;


}
</style>